<template>
  <div class="cmes-Comment">
    <!-- 输入框 -->
    <textarea id="textareaId" class="cmes-textarea" cols="103" rows="10" v-model="message.content"></textarea>
    <!-- emoji -->
    <div class="cmes-emoji">
      <div class="cmes-emoji-title" @click="changeShow">
        <p v-if="isShow==0">戳我试试φ(≧ω≦*)♪</p>
        <P v-if="isShow==1">嘿嘿嘿o(*^＠^*)o</P>
      </div>
      <div class="cmes-emoji-icon" v-if="isShow==1">
          <span v-for="ejItem in emoji" :key="ejItem.id" :title="ejItem.name"  class="cmes-emoji-child" @click="toIcon(ejItem.icon)">{{ejItem.icon}}</span>
      </div>
    </div>
    <!-- 用户信息和发布留言 -->
    <div class="cmes-user">
      <!-- <div class="cmes-user-email">
        <i class="iconfont icon-yonghutouxiang1 cmes-user-icon"></i>
        <el-tooltip content="昵称不要超过5个字哦" placement="top" effect="light">
            <el-input placeholder="昵称(必须name*)" v-model="user.nickname" clearable class="cmes-user-ipt" maxlength="5"  @change="isEmpty(user.nickname)"></el-input>
        </el-tooltip>
        <el-tooltip content="要输入正确的邮箱哦" placement="top" effect="light">
          <el-input type="email" placeholder="邮箱(必须email*)" v-model="user.account" clearable class="cmes-user-ipt" @change="rule(user.account)"></el-input>
        </el-tooltip>
      </div> -->
      <el-checkbox v-model="check">滴，学生卡|I'm not a robot</el-checkbox>
      <!-- <p class="cmes-user-btn" @click="insertMes">BiuBiuBiu~</p> -->
      <el-button size="700px" class="cmes-user-btn"  @click="insertMes" :disabled="!check">BiuBiuBiu~</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props:['grade','fromChildId','fromChildName','toUid'],
  inject:['reload'],//注入App里的reload方法
  data(){
    return {
      emoji:[],
      isShow:0,
      message:{
        mes_id:"",
        topic_id:"",
        topic_type:"",
        content:"",//评论内容
        zd_id:"",
        zd_days:"",
        time:"",//评论时间
        from_uid:"",//评论用户id
        to_uids:"",//目标用户id
        fromChildId:"",//评论子用户id
        fromChildName:"",//评论子用户昵称
      },
      check:0,
      isReply:false,
    }
  },
  mounted(){
    document.getElementById('textareaId').focus();
    this.getEmoji();
    this.message.fromChildId = this.fromChildId;
    this.message.fromChildName = this.fromChildName;
  },
  methods:{
    // 获取emoji图标数据
    async getEmoji(){
      const {data:res} = await this.$http.get("emoji");
      // console.log(res);
      if(res.status != 200){
        this.$message.error('获取数据失败');
      }else{
        this.emoji = res.message;
      }
    },
    toIcon(icon){
      this.message.content+=icon;
      document.getElementById('textareaId').focus();
    },
    changeShow(){
      this.isShow = !this.isShow;
    },
    async insertMes(){
      // console.log("发表");
      // 判断内容
      if(this.message.content==""){
        this.$message('哎呀，你是不是忘记写内容啦');
      }else{
        let istrue = this.$store.getters.getShow;
        // this.message.time = new Date();
        this.message.time = this.fileType.changeDate(new Date());
        this.message.to_uids = this.toUid;
        if(istrue){
          this.message.from_uid = this.$store.getters.getUser.user_id;
          console.log(this.message);
          let mes = JSON.stringify(this.message);
          let grade = this.grade
          if(grade == 1){
            console.log("回复1");
            console.log(mes,grade);
            const {data:replyRes} = await this.$http.post("insertReply",{mes,grade});
            if(replyRes.status != 200){
              this.$message.error('添加回复失败');
            }else{
              this.$message({
                message: '发表成功',
                type: 'success'
              });
            }
          }else if(grade == 2){
            console.log("回复2");
            // const mes = JSON.parse(mes);
            // mes.from_childId = this.toUid;
            console.log(mes);
            console.log(grade);
            const {data:replyRes} = await this.$http.post("insertReply",{mes,grade});
            if(replyRes.status != 200){
              this.$message.error('添加回复失败');
            }else{
              this.$message({
                message: '发表成功',
                type: 'success'
              });
            }
          }
        }


        this.message.content  = "";
        this.check=0;
        this.reload();
      }
    }
  }
}
</script>
<style scoped>
@import url('./message.css');
</style>
